<script setup>
// 计算属性 => 基于一个已有的数据 计算得到一个数据(缓存)
import { reactive, ref, watch } from 'vue'
// watch(要监听的数据, 回调函数, 额外的配置)
const money = ref(100)
const count = ref(0)
const obj = reactive({
  name: 'zs',
  age: 100,
})

const obj2 = ref({
  name: 'zs',
  age: 100,
})
// // 1. 监听当个ref
// watch(money, (val, oldVal) => {
//   console.log('money 改变了', val, oldVal)
// })

// // 2. 监听多个ref
// watch([money, count], (val) => {
//   console.log('有数据改变...', val)
// })

// // 3. 监听复杂数据 reactive
// watch(obj, (val) => {
//   console.log('reactive 定义的数据改变了', val)
// })

// 4. 监听复杂数据 ref
// 对象的某个属性改变之后, 不会引起对象的引用地址改变, 就不会监听到, 必须开启深度监听
// watch(
//   obj2,
//   (val) => {
//     console.log('obj2改变的数据', val)
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// )

// 5. 监听对象上的某一个属性
watch(
  () => obj2.value.name,
  (val) => {
    console.log('监听对象上某一个属性', val)
  }
)
</script>

<template>
  <div>{{ money }}</div>
  <button @click="money++">修改money的值</button>

  <div>{{ count }}</div>
  <button @click="count++">+1</button>

  <div>{{ obj }}</div>
  <button @click="obj.name = 'ls'">obj改名</button>

  <div>{{ obj2 }}</div>
  <button @click="obj2.name = 'ls'">obj改名</button>
</template>
